<template>
  <div class="layout">
    <Header />
    <div class="container">
      <div class="map-container">
        <div class="map-container-in">
          <div class="map-title">
            <div class="title">轨迹图</div>
            <div class="select">
              <!-- <SelectComponent /> -->
            </div>
          </div>
          <div id="map"></div>
        </div>
      </div>
      <div class="table-container">
        <div class="info">
          <div class="table-name">车辆信息</div>
          <BaseInfoTable />
        </div>

        <div class="space-30"></div>

        <div class="info">
          <div class="table-name">具体行程</div>
          <PositionInfoTables />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import { ref, onMounted } from "vue";
import Header from "@/components/Header.vue";
import BaseInfoTable from "@/components/BaseInfoTable.vue";
import PositionInfoTables from "@/components/PositionInfoTables.vue";
import { setLocation, fetchBasicInfoData } from "@/api/get-data.js";
import pinia from "@/store/pinia";
import { useMapStore } from "@/store/map";
const mapStore = useMapStore(pinia);

// mapStore.basicInfoTableCurrentPage;
// mapStore.basicInfoTablePageSize;

onMounted(() => {
  const map = L.map("map").setView([26.4258641179, 111.61945505792], 8);

  L.tileLayer("http://65.29.3.154:89/roadmap/{z}/{x}/{y}.png", {
    minZoom: 7,
    maxZoom: 16,
    attribution:
      ' ',
  }).addTo(map);

  setLocation(map);
  fetchBasicInfoData(
    mapStore.basicInfoTableCurrentPage,
    mapStore.basicInfoTablePageSize
  );

  setInterval(function () {
    setLocation(map);
    mapStore.basicInfoTableCurrentPage = 1;
    fetchBasicInfoData(
      mapStore.basicInfoTableCurrentPage,
      mapStore.basicInfoTablePageSize
    );
  }, 60 * 1000);
});
</script>

<style scoped>
.container {
  display: flex;
  height: calc(100vh - 170px);
}

.map-container {
  /* border: 2px solid #0b4175; */
  /* border-radius: 10px; */
  height: 100%;
  flex: 1;
  padding: 1px;
  margin-left: 10px;
  min-width: 400px;
}

.map-container-in {
  /* border-radius: 10px;
  background: #0b4175; */
  height: 100%;
}

.map-title {
  height: 50px;
  line-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: url("./assets/images/holder.png") no-repeat scroll left center;
  background-size: cover;
}

.title {
  color: #fff;
  padding-left: 15px;
  padding-bottom: 5px;
  font-size: 20px;
}

.select {
  color: #fff;
}

#map {
  height: calc(100% - 50px);
  /* border-radius: 10px; */
}

.table-container {
  width: 1030px;
  margin-left: 10px;
  padding-right: 10px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.info {
  /* border: 2px solid #0b4175; */
  /* border-radius: 10px; */
  height: auto;
  /* padding: 1px; */
}

.table-name {
  height: 50px;
  line-height: 40px;
  padding-left: 15px;
  background: url("./assets/images/holder.png") no-repeat scroll left center;
  background-size: cover;
  color: #fff;
  font-size: 20px;
}
</style>
